<ion-header>
  <ion-toolbar class="toolbar-head">
    <ion-buttons slot="start" mode='ios'>
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title>{{titleStr}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="row-title">
    <nav (click)="item(0)" style="width: 15%;">
      <label style="padding-left: 10px;" [ngStyle]="{color: itemSelect==0?'#FFF600':'#FFFFFF'}">Sale</label>
      <label style="margin-left: 10px;" *ngIf="itemSelect==0?true:false" class="row-title-border"></label>
    </nav>
    <nav (click)="item(1)" style="width: 25%;">
      <label [ngStyle]="{color: itemSelect==1?'#FFF600':'#FFFFFF'}">New Arrivals</label>
      <label *ngIf="itemSelect==1?true:false" class="row-title-border"></label>
    </nav>
    <nav (click)="item(2)" style="width: 23%;">
      <label [ngStyle]="{color: itemSelect==2?'#FFF600':'#FFFFFF'}">Bestsellers</label>
      <label *ngIf="itemSelect==2?true:false" class="row-title-border"></label>
    </nav>
    <nav (click)="item(3)" style="width: 17%;">
      <div class="dropup">
        <span [ngStyle]="{color: itemSelect==3?'#FFF600':'#FFFFFF'}">Price </span>
        <ion-icon name="caret-up-outline" mode='md'  [ngStyle]="{color: priceOrder==1?'#FFF600':'#FFFFFF'}"></ion-icon>
        <ion-icon style="margin-top: -6px;" name="caret-down-outline" mode='md'  [ngStyle]="{color: priceOrder==2?'#FFF600':'#FFFFFF'}"></ion-icon>
        <!-- <ion-icon name="arrow-dropup" mode='md' [ngStyle]="{color: priceOrder==1?'#FFF600':'#FFFFFF'}"></ion-icon> -->
     

        <!-- <ion-icon style="margin-top: -8px;" name="arrow-dropdown" mode='md'
          [ngStyle]="{color: priceOrder==2?'#FFF600':'#FFFFFF'}"></ion-icon> -->
      </div>
      <label *ngIf="itemSelect==3?true:false" class="row-title-border"></label>
    </nav>
    <nav class="filtrate" (click)="item(4)">
      <span>Filter</span>
      <img src="../../../../assets/img/filtrate.png" alt="">
    </nav>
  </div>

  <div class="commodity">
      <!-- <div class="item"  [routerLink]="['/goods-details']" routerLinkActive="router-link-active" >
          <div><img src="../../assets/img/index/pic5.png" alt=""></div>
          <div class="name">AJ,AJ1,Nike,AJ6 TOP 10！黑红 AJ6</div>
          <div class="price">$359.00</div>
      </div> -->
      <div class="item" *ngFor="let item of categoryDetailData" (click)="onItemDetail(item)">
          <!-- <div><img src="../../assets/img/index/pic5.png" alt=""></div> -->
          <div><img style="height:180px;" onerror="this.src='../../assets/img/index/pic5.png';this.onerror=null" src="{{imageUrl+item.procImg}}" alt=""></div>
          <!-- <div class="name">{{item.procName}}</div> -->

          <div class="line-clamp-div ">
            <p class="line-clamp ">{{item.procName}}
            </p>
        </div>
        <div class="price"><label style="font-size: 1rem;">$</label>
          {{AmountOfConversion(item.procCashPrice)}}  <a *ngIf="itemSelect==0" style="font-size: 0.85rem;text-decoration: line-through;color: #666666;">${{AmountOfConversion(item.procOldPrice)}}</a>
          <!-- <span>{{item.salesVolume?item.salesVolume:'0'}} buy</span> -->
        </div>
          <!-- <div class="price">${{AmountOfConversion(item.procCashPrice)}}</div> -->
      </div>
 
  </div>

  <!-- <div class="list-content">
    <div class="goods-list">
      <img src="../../../../assets/img/index/pic.png" alt="">
    <div class="goods-list-div">AJ,AJ1,Nike,AJ6 TOP 10！黑红 AJ6 TOP 10！黑红 A TOP 10！黑红 A TOP 10！黑红 A TOP 10！黑红 A</div>
    </div>
  </div> -->



</ion-content>